<template>
  <div class="media_find">
    <div class="nav_body">
      <div class="top_nav">
        <img v-if="$store.state.device !== 'APP'" class="logo_left" src="../../../assets/img/modules/media/icon_13.png" alt="">
        <div class="nav_list">
          <a href="/media-find" class="nav_item active">首页</a>
          <a href="/media-attention" class="nav_item">关注</a>
        </div>
        <div v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')"  class="btn_right">
          <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
          <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
          <a href="javascript:;">
            <img src="../../../assets/img/modules/media/icon_25.png" alt="">
            <img class="active" src="../../../assets/img/modules/media/icon_26.png" alt="">
          </a>
        </div>
      </div>
      <div class="nav_search_body" @click="$router.push({ path: '/media-sarch' })">
        <img src="../../../assets/img/modules/media/icon_23.png" alt="">搜索你感兴趣的内容
      </div>
    </div>
    <div class="banner_nav_list">
      <swiper :options="swiperNav" ref="swiperNav">
        <swiper-slide :class="navActive === 0?'item_nav_body active':'item_nav_body'">
          <a href="javascript:;" @click="getArticleList(0, 0)">推荐</a>
        </swiper-slide>
        <swiper-slide  v-for="(item, index) in termsList" :key="item.termId + '' + index" :class="navActive === index+1?'item_nav_body active':'item_nav_body'">
          <a href="javascript:;"  @click="getArticleList(item.termId,index+1)">{{item.name}}</a>
        </swiper-slide>
      </swiper>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div v-if="navActive === 0" class="banner_body">
        <van-swipe :autoplay="30000" indicator-color="white">
          <van-swipe-item v-for="item in bannerList" :key="item.postId"  @click="$router.push({ path:'/media-detail', query:{ id: item.postId }})">
            <img class="banner_img" :src="item.imageUrl" alt="">
            <p>{{item.title}}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div v-if="navActive === 0" class="direction_body">
        <div class="list_tab">
          <swiper :options="swiperFind" ref="swiperFind">
            <swiper-slide  v-for="(item, index) in labelList" :key="item.termId" class="item_tab_body">
              <div  @click="getArticleList(item.termId, navActive)">
                <img :src="'https://m.oucgz.cn/images/label_'+ (index+1)%6  +'.png'" alt="">
                <p>{{item.name}}</p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <div v-for="(item, index) in articleList" :key="item.post.id+ '' +index">
          <!-- 是大V 没有图片 -->
          <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount === 0" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
            </a>
            <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 一张图片 -->
          <div v-if="item.isV === 2 && item.imageCount === 1"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
              <img :src="item.images[0]" alt="">
            </a>
            <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 多张图片 -->
          <div v-if="item.isV === 2 && item.imageCount > 1" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <div class="img_list">
                  <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                </div>
              </div>
            </a>
            <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 是大V 视屏 -->
          <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount !== 0" class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                  <span>优质行业计划签约者</span>
                </div>
              </div>
            </div>
            <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
              </div>
            </a>
            <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            <div class="footer_body">
              <div class="right_body">
                <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 没有图片 -->
          <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount === 0"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            </div>
          </div>
          <!-- 不是大V 一张图片 -->
          <div v-if="item.isV === 1 && item.imageCount === 1"   class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
              <img :src="item.images[0]" alt="">
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            </div>
          </div>
          <!-- 不是大V 多张图片 -->
          <div v-if="item.isV === 1 && item.imageCount > 1"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-detail?id=' + item.post.id" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <div class="img_list">
                  <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                </div>
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            </div>
          </div>
          <!-- 不是大V 视屏 -->
          <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount !== 0"  class="item_v2_index_news">
            <div class="top_img">
              <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img :src="item.avatar" alt="">
                <div class="name_text">
                  <p>{{item.user_nickName}}</p>
                </div>
              </div>
            </div>
            <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
              </div>
            </a>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
            </div>
          </div>
          <div v-if="index === 3 && userList.length > 0" class="interest_body">
            <div class="title_a_text">
              <span>你可能感兴趣的</span>
              <a href="/media-attention-more"><img src="../../../assets/img/modules/media/icon_06.png" alt=""></a>
            </div>
            <swiper :options="swiperInterest" ref="swiperInterest">
              <swiper-slide v-for="item in userList" :key="item.userId" class="item_interest_body">
                <img :src="item.avatar" alt=""  @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
                <img v-if="item.isV !== 1" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                <h5>{{item.user_nickName}}</h5>
                <!--              <p>就业</p>-->
                <button :class="item.isConcerned !== 1 ? 'active':''" @click="setAttention(item.userId, item)">{{item.isConcerned !== 1?'已关注':'关注'}}</button>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <!--加载状态-->
        <div v-for="item in 4" :key="item">
          <van-skeleton
              title
              style="margin-top: 30px"
              avatar
              :row="4"
              :loading="loading">
          </van-skeleton>
        </div>
      </van-list>
      <div v-if="footerShow" class="no_data_title">
        <p>没有内容了~</p>
      </div>
    </van-pull-refresh>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
import dragLoding from '@/components/loding'
import mediaMixins from '@/utils/modules/media'
export default {
  mixins: [mediaMixins],
  name: 'media_find',
  components: {
    dragLoding
  },
  data () {
    return {
      isLoading: false, // 下拉刷新
      showLoding: true, // loading效果
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      navActive: 0,
      swiperNav: { // 初始化菜单
        slidesPerView: '5.5',
        spaceBetween: 0
      },
      swiperFind: { // 初始化分类
        slidesPerView: 'auto',
        spaceBetween: 0
      },
      swiperInterest: { // 初始化用户列表
        slidesPerView: '3.4',
        spaceBetween: 0
      },
      termsList: [], // 分类列表
      labelList: [], // 标签列表
      userList: [], // 博主列表
      bannerList: [], // banner热点
      articleId: 0, // 当前分类ID
      articleList: [], // 文章列表
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 22:29
     *@function  获取标签
     *****************************************/
    getLabelList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpterms/getPostTagListList`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('标签查询失败~')
          return false
        }
        this.labelList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 21:11
     *@function  banner 热点
     *****************************************/
    getBannerImg () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wppostmeta/getBanner`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('热点查询失败~')
          return false
        }
        this.bannerList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 16:32
     *@function  获取文章分类
     *****************************************/
    getTermsList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpterms/getTermsList`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章菜单查询失败~')
          return false
        }
        this.termsList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  获取文章列表
     *****************************************/
    getArticleList: debounce(function (id, index) {
      // 切换做当前页重置
      if (this.articleId !== id) {
        this.current = 1
        this.articleList = []
        this.finished = false
      }
      this.articleId = id
      this.navActive = index
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPostsList?wpTermsId=${id}&current=${this.current}&size=${this.size}&openid=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.forEach(item => {
          this.articleList.push(item)
        })
        this.loading = false
      }).catch(() => {})
    }, 100, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad: debounce(function () {
      this.getArticleList(this.articleId, this.navActive)
      this.current = this.current + 1
    }, 100, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 12:13
     *@function  下拉刷新
     *****************************************/
    onRefresh () {
      this.current = 1
      this.articleList = []
      Promise.all([
        this.getUrlData(),
        this.getBannerImg(),
        this.getLabelList(),
        this.getTermsList(),
        this.getUserList()
      ]).then(() => {
        this.getArticleList(0, 0)
      })
      this.isLoading = false
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#ffffff')
    Promise.all([
      this.getUrlData(),
      this.getBannerImg(),
      this.getLabelList(),
      this.getTermsList(),
      this.getUserList()
    ]).then(() => {
      this.getArticleList(0, 0)
    })
  },
  destroyed () {
    document.querySelector('body').setAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .media_find {
    .top_nav{
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:  0 32px;
      .logo_left{
        width: 185px;
        height: 58px;
      }
      .nav_list{
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        margin: 0 auto;
        .nav_item{
          font-size: 28px;
          color: #999999;
          position: relative;
          padding: 0 15px;
        }
        .active{
          color: #027FFE;
          &:after{
            content: '';
            width: 24px;
            border-radius: 5px;
            height: 8px;
            background-color: #027FFE;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .nav_search_body{
      margin: 10px 32px;
      width: 686px;
      height: 64px;
      background: #F3F3F3;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #666666;
      img{
        width: 28px;
        height: 24px;
        margin-right: 10px;
      }
    }
    .nav_body{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background-color: #ffffff;
    }
    .banner_nav_list{
      box-shadow: 0 2px 12px 0 rgba(153,153,153,0.14);
      margin: 170px 0 20px;
      padding-left: 32px;
      .item_nav_body{
        a{
          font-size: 28px;
          color: #999999;
          display: block;
          line-height: 80px;
        }
      }
      .active{
        a{
          font-size: 28px;
          color: #222222;
        }
      }
    }
    .banner_body{
      position: relative;
      border-radius: 6px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      margin: 0 32px 0;
      .banner_img{
        width: 686px;
        height: 320px;
        display: block;
      }
      .van-swipe-item{
        position: relative;
      }
      p{
        position: absolute;
        font-size: 26px;
        color: #ffffff;
        background-color: rgba(0,0,0,0.5);
        z-index: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55px;
        margin: 0;
        display: block;
        line-height: 55px;
        padding: 0 200px 0 15px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .van-swipe-item{
        background: url("../../../assets/img/modules/media/icon_v2_3.png") no-repeat center;
        background-size: 100% auto;
      }
    }
    .direction_body{
      .list_tab{
        padding: 0 0 0 22px;
        .item_tab_body{
          margin: 20px;
          text-align: center;
          width: 98px;
          img{
            width: 80px;
            height: 80px;
            border-radius: 80px;
            margin: 0 auto;
          }
          p{
            font-size: 24px;
            color: #666666;
            margin: 0;
          }
        }
      }
    }
    .interest_body{
      padding-left: 32px;
      .title_a_text {
        padding: 32px 32px 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        span {
          font-size: 40px;
          color: #222222;
        }

        a {
          display: flex;

          img {
            width: 16px;
            height: 26px;
          }
        }
      }
      .item_interest_body{
        text-align: center;
        img{
          width: 200px;
          height: 200px;
          border-radius: 200px;
        }
        .v_img{
          position: absolute;
          width: 45px;
          height: 45px;
          z-index: 99;
          top: 150px;
          right: 30px;
        }
        h5{
          font-size: 28px;
          color: #222222;
          margin: 0;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        P{
          font-size: 20px;
          color: #999999;
          margin: 10px 0;
        }
        button{
          background: #027FFE;
          border-radius: 4px;
          font-size: 24px;
          color: #FFFFFF;
          width: 109px;
          height: 54px;
          border: 0;
          display: block;
          margin: 30px auto;
        }
        .active{
          background: #EEEEEE;
          color: #222222;
        }
      }
    }
    .footer_title{
      margin: 100px auto;
      text-align: center;
      img{
        width: 594px;
        height: 71px;
      }
    }
  }
</style>
